<template>
	<page-container>
		<a-card class="mb-4">
      <div class="flex justify-between">
        <div class="flex">
          <a-button type="primary" @click="$refs.form.add()" v-access="['Activity:save']">
            <template #logo>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
          <a-form-item>
            <a-input v-model:value="searchData.title" placeholder="动态名称">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
    <a-card>
      <a-table row-key="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
        <template #bodyCell="{ text, record, column }">
          <a-space wrap v-if="column.dataIndex === 'operation'">
            <a-button size="small" @click="$refs.form.edit(record)" v-access="['Activity:update']">编辑</a-button>
            <a-button type="primary" size="small" @click="comment(record.id)">评论</a-button>
            <a-button type="primary" size="small" @click="upvote(record.id)">点赞</a-button>
            <a-popconfirm title="确认删除？" @confirm="del(record.id)">
              <a-button danger size="small" v-access="['Activity:del']">删除</a-button>
            </a-popconfirm>
          </a-space>
          <template v-else-if="column.dataIndex === 'cover'">
            <a-image shape="square" :width="64" :cover="text">
              <template #icon><FileImageOutlined /></template>
            </a-image>
          </template>
        </template>
      </a-table>
		</a-card>
    <activity-edit ref="form" @change="updated" />
		<comment-index ref="comment" />
		<upvote-index ref="upvote" />
	</page-container>
</template>
<script lang="ts">
import {page, list} from "@/mixins";
import DynamicEdit from "./DynamicEdit.vue";
import CommentIndex from "./CommentIndex.vue";
import UpvoteIndex from "./UpvoteIndex.vue";

export default {
	mixins: [page, list],
	components: {DynamicEdit, UpvoteIndex, CommentIndex},
	data() {
		return {
			loadPath: 'dynamic',
			columns: [
				{
					title: '标题',
					dataIndex: 'title',
				},
				{
					title: '用户',
					dataIndex: 'nickname',
				},
				{
					title: '图片',
					dataIndex: 'album',
				},
				{
					title: '发布于',
					dataIndex: 'create_at',
				},
				{
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			searchData: {
				title: ''
			}
		}
	},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	},
	methods: {
		comment(id: Number) {
			this.$refs.comment.searchData.activity_id = id
			this.$refs.comment.open = true
		},
		upvote(id: Number) {
			this.$refs.upvote.searchData.activity_id = id
			this.$refs.upvote.open = true
		}
	}
}
</script>